<template>
	<button
		:size="size === 'mini' ? 'mini' : 'default'"
		:class="[
			`button--${size}`,
			`button--${type}`,
			plain ? `button--${type}--plain` : '',
			round ? 'button--radius' : '',
			disabled ? 'button--disabled' : '',
			loading ? 'button--loading' : ''
		]"
		:loading="loading"
		:open-type="openType"
		:style="[customStyle, colorStyle]"
		@getphonenumber="getphonenumber"
		@getuserinfo="getuserinfo"
		@error="error"
		@opensetting="opensetting"
		@launchapp="launchapp"
		@tap.stop="onClick">
		<slot></slot>
	</button>
</template>

<script>
	export default {
		name: 'componentButton',
		props: {
			size: {
				type: String,
				default: 'default'
			},
			type: {
				type: String,
				default: 'default'
			},
			plain: Boolean,
			disabled: Boolean,
			loading: Boolean,
			round: Boolean,
			openType: {
				type: String,
				default: ''
			},
			color: String,
			textColor: String,
			customStyle: {
				type: Object,
				default() {
					return {}
				}
			},
			url: String
		},
		computed: {
			colorStyle() {
				let style = {}
				if (this.color) {
					if (this.plain) {
						style.borderColor = this.color
						style.color = this.textColor || this.color
					} else {
						style.backgroundColor = this.color
						style.borderColor = this.color
					}
				}
				if (this.textColor) {
					style.color = this.textColor
				}
				return style
			}
		},
		methods: {
			onClick() {
				if (this.disabled || this.loading) return
				if (this.url) {
					this.$f.openUrl(this.url)
				}
				this.$emit('click')
			},
			getphonenumber(res) {
				this.$emit('getphonenumber', res);
			},
			getuserinfo(res) {
				this.$emit('getuserinfo', res);
			},
			error(res) {
				this.$emit('error', res);
			},
			opensetting(res) {
				this.$emit('opensetting', res);
			},
			launchapp(res) {
				this.$emit('launchapp', res);
			}
		}
	}
</script>

<style scoped lang="scss">
	[class*=button--] {
		display: inline-flex !important;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		font-size: 28rpx;
		line-height: 2.3;
		margin: 0;
		color: #323233;
		background-color: #fff;
		border: 1px solid #ebedf0;
		&.button--default {
			&--plain {
				background-color: transparent;
			}
		}
		&.button--primary {
			background-color: $color-theme;
			color: #fff;
			border-color: $color-theme;
			&--plain {
				color: $color-theme;
				background-color: #fff;
				border-color: $color-theme;
			}
		}
		&.button--effect {
			background-image: $color-gradient;
			color: #fff;
			border: none;
			&--plain {
				color: $color-theme;
				background: #fff;
				border-color: $color-theme;
			}
		}
		&.button--danger {
			background-color: #ee0a24;
			color: #fff;
			border-color: #ee0a24;
			&--plain {
				color: #ee0a24;
				background-color: #fff;
				border-color: #ee0a24;
			}
		}
		&.button--radius {
			border-radius: 54rpx;
		}
		&.button--disabled,
		&.button--loading {
			background-image: none;
			background-color: #d9d9d9 !important;
			color: #fff !important;
			border-color: #d9d9d9 !important;
			&::before {
				margin-right: 12rpx;
			}
		}
		&::after {
			opacity: 0;
		}
		&.button--mini {
			height: 54rpx;
			font-size: 24rpx;
			line-height: 1 !important;
			padding: 0 18rpx !important;
		}
		&.button--large {
			display: flex;
			width: 100%;
			height: 90rpx;
			font-weight: bold;
			font-size: 36rpx;
			letter-spacing: 4rpx;
			&.button--radius {
				border-radius: 90rpx;
			}
			&.button--disabled,
			&.button--loading {
				color: #999 !important;
			}
		}
	}
</style>
